<template>
  <div class="img-content" v-loading="showSpin">
    <el-card class="search-card">
      <div slot="header" class="clearfix">
        <span>完善图文信息</span>
        <div class="card-operating-area">
          <el-button type="text" @click="handleSaveImgTextInfo">保存</el-button>
        </div>
      </div>
      <Table
        style="margin-bottom: 16px"
        border
        ref="selection"
        @on-select="handleSelect"
        @on-select-cancel="handleSelectCancel"
        @on-select-all="handleSelectAll"
        @on-select-all-cancel="handleSelectAllCancel"
        :columns="columns4"
        :data="skuList"
      ></Table>
      <Form>
        <FormItem
          class="item-wrap"
          v-for="(item, index) in tableSelect"
          :key="index"
        >
          <div class="sku-info">
            <div><b>SKU编码：</b>{{ item.skuNo }}</div>
            <div><b>SKU名称：</b>{{ item.skuName }}</div>
            <div><b>SKU规格：</b>{{ item.specDetailStr }}</div>
          </div>
          <div class="sku-img">
            <Row>
              <RadioGroup v-model="item.button" type="button">
                <Radio label="本地上传"></Radio>
                <Radio label="图片库上传"></Radio>
              </RadioGroup>
            </Row>
            <Row style="padding-top: 10px" v-show="item.button == '本地上传'">
              <Upload
                class="ivu-mr qw-disflex"
                :isMultiple="true"
                :defaultList="item.imgList"
                :maxSize="2048"
                :maxLen="3"
                :format="['jpg', 'jpeg', 'png']"
                @handleChangeImage="changeSkuImageKey($event, index)"
              >
              </Upload>
            </Row>
            <Row style="padding-top: 10px" v-show="item.button == '图片库上传'">
              <photo
                :maxlength="3"
                :defaultList="item.imgList"
                @child-imglist="getChildPhoto($event, 's', index)"
              ></photo>
            </Row>
            <div class="note">提示：最多可添加3张图片</div>
          </div>
        </FormItem>
      </Form>
    </el-card>
    <el-backtop target="#app .i-layout-content-main">
      <i class="el-icon-top"></i>
    </el-backtop>
  </div>
</template>
<script>
import { isResponseSuccess } from '@/utils/bizUtils';
import { ApiRequest } from '@api/basePage';
import iQuill from '@/components/quill'; // 编辑器组件
import Upload from '@/components/common/upload'; // 上传组件
import photo from '@/components/common/photoGallery'; // 图片库选择
export default {
  name: 'ImgTextInfo',
  components: {
    iQuill,
    Upload,
    photo
  },
  data () {
    return {
      showSpin: false,
      productUuid: '',
      tableSelect: [],
      skuList: [],
      columns4: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: 'SKU编码',
          key: 'skuNo',
          minWidth: 70
        },
        {
          title: 'SKU名称',
          key: 'skuName',
          minWidth: 300
        },
        {
          title: '规格',
          key: 'specDetailStr',
          minWidth: 200
        }
      ]
    };
  },
  created () {
    const { productUuid } = this.$route.query;
    this.productUuid = productUuid;
    this.querySkuInfoAciton();
  },
  methods: {
    querySkuInfoAciton () {
      this.tableSelect = [];
      this.showSpin = true;
      ApiRequest(
        `/sysback/product/addSku/picInfo/getSkuAndSkuPicInfoByProductUuid?productUuid=${this.productUuid}`,
        'post',
        {}
      )
        .then((res) => {
          this.showSpin = false;
          if (isResponseSuccess(res)) {
            const { picList, skuList } = res.retData;
            skuList.forEach((skuitem) => {
              skuitem.button = '本地上传';
              skuitem.imgList = [];
              const select = {
                ...skuitem,
                imgList: [],
                button: '本地上传'
              };
              if (picList && picList.length !== 0) {
                picList.forEach((item) => {
                  if (skuitem.skuNo === item.skuNo) {
                    skuitem._checked = true;
                    skuitem._disabled = true;
                    select.imgList.push({
                      url: item.basicImageKey,
                      uid: item.uuid
                    });
                  }
                });
              }
              if (select.imgList.length > 0) {
                this.tableSelect.push(select);
                skuitem.imgList = select.imgList;
              }
            });
            this.skuList = skuList;
          }
        })
        .catch(() => {
          this.showSpin = false;
        });
    },
    // 保存图文信息
    saveSkuInfoAciton (data) {
      this.showSpin = true;
      ApiRequest('/sysback/product/addSku/picInfo/saveSkuPicInfo', 'post', data)
        .then((res) => {
          this.showSpin = false;
          if (isResponseSuccess(res)) {
            this.$message.success('保存成功');
            this.$router.go(-1)
          }
        })
        .catch(() => {
          this.showSpin = false;
        });
    },
    // 表格单选勾选
    handleSelect (selection, row) {
      this.tableSelect.push(row);
    },
    // 表格取消勾选
    handleSelectCancel (selection, row) {
      const index = this.tableSelect.findIndex(
        (item) => item.skuNo === row.skuNo
      );
      this.tableSelect.splice(index, 1);
    },
    // 表格全选
    handleSelectAll (selection) {
      selection.forEach((item) => {
        if (this.tableSelect.findIndex((i) => i.skuNo === item.skuNo) < 0) {
          this.tableSelect.push(item);
        }
      });
    },
    // 表格取不取消勾选
    handleSelectAllCancel (selection) {
      this.tableSelect = selection;
    },
    // sku商品 图
    changeSkuImageKey (e, index) {
      this.tableSelect[index].imgList = e;
    },
    // 图片库 点击 确认 返回的图片列表
    getChildPhoto (data, i, si) {
      this.tableSelect[si].imgList = data;
    },
    // 保存图文信息
    handleSaveImgTextInfo () {
      /* if (this.tableSelect.length === 0) {
        return this.$message.warning('请选择要完善的SKU');
      } */
      const picList = [];
      this.tableSelect.forEach((item) => {
        item.imgList.forEach((it, ix) => {
          const obj = {
            skuNo: item.skuNo,
            basicImageKey: it.imageKey ? it.imageKey : it.url,
            position: ix,
            productUuid: this.productUuid
          };
          picList.push(obj);
        });
      });
      /* if (picList.length === 0) {
        return this.$message.warning('SKU图片不能为空');
      } */
      const params = {
        productUuid: this.productUuid,
        picList,
        skuList: this.skuList
      };
      this.saveSkuInfoAciton(params);
    }
  }
};
</script>
<style lang="less" scoped>
.img-content {
  .card-operating-area {
    float: right;
  }
  .item-wrap {
    padding: 10px;
    border: 1px dashed #ccc;
  }
  .sku-info {
    height: 162px;
    width: 300px;
    padding: 5px;
    float: left;
    margin-right: 10px;
  }
  .sku-img {
    float: left;
  }
  .note {
    font-size: 12px;
    color: orange;
  }
}
</style>
